<template>
  <div class="survey-container">
    <nav-bar></nav-bar>
    <div class="survey-content">
      <div class="survey-card">
        <h2 class="question-title">{{ currentQuestion.title }}</h2>
        <div class="options-container">
          <div 
            v-for="(option, index) in currentQuestion.options" 
            :key="index"
            class="option-item"
            :class="{ 'selected': selectedOptions[currentQuestionIndex].includes(option.value) }"
            @click="selectOption(option.value)"
          >
            <div class="option-content">
              <div class="option-number">{{ index + 1 }}</div>
              <div class="option-text">{{ option.text }}</div>
            </div>
          </div>
        </div>
        <div class="progress-container">
          <div class="progress-bar">
            <div class="progress" :style="{ width: progressPercentage + '%' }"></div>
          </div>
        </div>
        <div class="button-container">
          <button class="back-btn" @click="prevQuestion" :disabled="currentQuestionIndex === 0">返回</button>
          <button class="next-btn" @click="nextQuestion" :disabled="!canProceed">{{ isLastQuestion ? '完成' : '下一个' }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue'

export default {
  name: 'CourseLearningSurvey',
  components: { NavBar },
  props: {},
  data() {
    return {
      currentQuestionIndex: 0,
      selectedOptions: [[], [], [], [], [], []], // 6个问题
      questions: [
        {
          id: 2,
          title: '你学习这门的主要目的的是？',
          type: 'multiple',
          options: [
            { value: 1, text: '课程考试' },
            { value: 2, text: '考研准备' },
            { value: 3, text: '竞赛（如ACM）' },
            { value: 4, text: '求职面试' },
            { value: 5, text: '个人兴趣' }
          ]
        },
        {
          id: 3,
          title: '你希望在本课程中重点提升哪方面能力？',
          type: 'multiple',
          options: [
            { value: 1, text: '理论指导' },
            { value: 2, text: '算法实现' },
            { value: 3, text: '时间复杂度优化' },
            { value: 4, text: '实际工程应用' }
          ]
        },
        {
          id: 4,
          title: '你更倾向哪种学习形式？',
          type: 'multiple',
          options: [
            { value: 1, text: '视频讲解+案例' },
            { value: 2, text: '图文教程+代码片段' },
            { value: 3, text: '交互式编程练习' },
            { value: 4, text: '项目实战' }
          ]
        },
        {
          id: 5,
          title: '你计划在多长时间内完成该课程学习？',
          type: 'single',
          options: [
            { value: 30, text: '1个月' },
            { value: 60, text: '2个月' },
            { value: 90, text: '3个月' },
            { value: 120, text: '4个月' },
            { value: 150, text: '5个月' },
            { value: 180, text: '半年以上' }
          ]
        },
        {
          id: 7,
          title: '每天计划投入多少时间学习本课程？',
          type: 'single',
          options: [
            { value: 20, text: '20分钟' },
            { value: 30, text: '30分钟' },
            { value: 40, text: '40分钟' },
            { value: 60, text: '60分钟' },
            { value: 120, text: '120分钟' }
          ]
        },
        {
          id: 6,
          title: '你的编程基础如何？',
          type: 'single',
          options: [
            { value: 1, text: '初学者（无编程经验）' },
            { value: 2, text: '了解基础语法' },
            { value: 3, text: '有一定项目经验' },
            { value: 4, text: '熟练（1年以上经验）' },
            { value: 5, text: '专业（3年以上经验）' }
          ]
        }
      ]
    }
  },
  computed: {
    currentQuestion() {
      return this.questions[this.currentQuestionIndex]
    },
    isLastQuestion() {
      return this.currentQuestionIndex === this.questions.length - 1
    },
    progressPercentage() {
      return ((this.currentQuestionIndex + 1) / this.questions.length) * 100
    },
    canProceed() {
      const currentSelections = this.selectedOptions[this.currentQuestionIndex]
      if (this.currentQuestion.type === 'single') {
        return currentSelections.length === 1
      } else {
        return currentSelections.length > 0
      }
    }
  },
  methods: {
    selectOption(value) {
      const currentSelections = this.selectedOptions[this.currentQuestionIndex]
      if (this.currentQuestion.type === 'single') {
        this.selectedOptions[this.currentQuestionIndex] = [value]
      } else {
        const index = currentSelections.indexOf(value)
        if (index === -1) {
          currentSelections.push(value)
        } else {
          currentSelections.splice(index, 1)
        }
      }
    },
    nextQuestion() {
      if (this.isLastQuestion) {
        this.submitSurvey()
      } else {
        this.currentQuestionIndex++
      }
    },
    prevQuestion() {
      if (this.currentQuestionIndex > 0) {
        this.currentQuestionIndex--
      }
    },
    submitSurvey() {
      // 获取课程ID
      const courseId = this.$route.query.id || this.$route.params.id
      // 获取问卷答案
      // 假设第4题是计划完成天数，第5题是每天投入时间（根据当前问题顺序）
      const planDuration = this.selectedOptions[3][0]; // "你计划在多长时间内完成该课程学习？"
      const dailyMinutes = this.selectedOptions[4][0]; // "每天计划投入多少时间学习本课程？"
      // 获取课程信息（可根据实际情况补充）
      let learningCourses = JSON.parse(localStorage.getItem('learningCourses')) || {};
      let inProgressCourses = learningCourses['正在进行'] || [];
      // 查找或添加课程
      const existingIndex = inProgressCourses.findIndex(c => c.id === courseId);
      if (existingIndex !== -1) {
        inProgressCourses[existingIndex] = {
          ...inProgressCourses[existingIndex],
          planDuration,
          dailyMinutes
        };
      } else {
        inProgressCourses.push({
          id: courseId,
          planDuration,
          dailyMinutes
        });
      }
      learningCourses['正在进行'] = inProgressCourses;
      localStorage.setItem('learningCourses', JSON.stringify(learningCourses));
      // 跳转到学习路径结果页面或课程学习页面
      this.$router.push('/my-learning')
    }
  }
}
</script>

<style scoped>
.survey-container {
  min-height: 100vh;
  background-color: #f5f5f9;
  padding-bottom: 60px;
}

.survey-content {
  width: 75%;
  max-width: 800px;
  margin: 40px auto;
}

.survey-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 40px;
  position: relative;
}

.question-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 30px;
  text-align: center;
  font-weight: 600;
}

.options-container {
  margin-bottom: 40px;
}

.option-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.option-item:hover {
  border-color: #6d28d2;
  background-color: #f8f7fa;
  transform: translateY(-2px);
}

.option-item.selected {
  border-color: #6d28d2;
  background-color: #f3f0ff;
  box-shadow: 0 2px 8px rgba(109, 40, 210, 0.15);
}

.option-content {
  display: flex;
  align-items: center;
}

.option-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #f3f0ff;
  color: #6d28d2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  margin-right: 15px;
  flex-shrink: 0;
}

.option-text {
  font-size: 16px;
  color: #333;
}

.progress-container {
  margin-bottom: 30px;
}

.progress-bar {
  height: 6px;
  background-color: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: #6d28d2;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.button-container {
  display: flex;
  justify-content: space-between;
}

.back-btn, .next-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.back-btn {
  background-color: white;
  color: #666;
  border: 1px solid #e0e0e0;
}

.back-btn:hover:not(:disabled) {
  background-color: #f5f5f5;
  color: #333;
}

.next-btn {
  background-color: #6d28d2;
  color: white;
  border: none;
}

.next-btn:hover:not(:disabled) {
  background-color: #5b21b6;
  transform: translateY(-2px);
}

.back-btn:disabled, .next-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style> 